page {
  // height: 100%;
  // padding-bottom: 36rpx;
  background-color: #dbf2c4;
  // box-sizing: border-box;
  .someoneTag {
    position: relative;
    width: 100%;
    // height: 100%;
    padding: 240rpx 14rpx 20rpx;
    box-sizing: border-box;
    .headerImg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 320rpx;
      z-index: -10;
      > image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .tagbox {
      z-index: 99;
      // height: 100%;
      padding: 40rpx 20rpx 20rpx;
      background-color: #fff;
      // border-top-left-radius: 10rpx;
      // border-top-right-radius: 10rpx;
      border-radius: 10rpx;
      font-size: 30rpx;
      box-shadow: 0 0 12px #9a9a9a;
      box-sizing: border-box;
      // transition: height 0.2s;
      &-header {
        display: flex;
        align-items: center;
        color: #000;
        font-size: 48rpx;
        margin-bottom: 28rpx;
        &-tip {
          color: #a6a6a6;
          font-size: 30rpx;
        }
        &-avatar {
          width: 112rpx;
          height: 112rpx;
          margin-right: 30rpx;
          border-radius: 100%;
          border: 6rpx solid #ffdc3d;
          overflow: hidden;
          box-sizing: border-box;
          image {
            width: 105%;
            height: 105%;
            object-fit: cover;
            border-radius: 100%;
          }
        }
      }
      &-list {
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-between;
      }
      // 标签样式
      .tags {
        height: 62rpx;
        line-height: 62rpx;
        padding: 0rpx 35rpx;
        margin-right: 28rpx;
        margin-bottom: 28rpx;
        border-radius: 32rpx;
        // transition: all 0.2s;
        .likeNum {
          display: inline;
          color: #f55949;
          font-size: 25rpx;
        }
        .likeImg {
          display: inline-block;
          width: 24rpx;
          height: 22rpx;
          margin-right: 4rpx;
          vertical-align: middle;
          object-fit: cover;
        }
      }
      .tags:last-child{
        margin-right: 0;
      }
      .defaults {
        color: #bfbfbf;
        border: 2rpx solid #bfbfbf;
        // transition: all 0.2s;
      }
      // 自定义
      .customTag {
        display: flex;
        align-items: center;
        width: 190rpx;
        height: 62rpx;
        // line-height: 60rpx;
        padding: 0rpx 35rpx;
        margin: 6rpx auto auto;
        color: #915e49;
        font-size: 30rpx;
        border-radius: 60rpx;
        border: 2rpx solid #f7c02f;
        box-shadow: 0 0 3px #f7c02f;
        background-color: #f7c02f;
        > image {
          width: 28rpx;
          height: 28rpx;
          margin-right: 10rpx;
          vertical-align: middle;
          object-fit: cover;
        }
      }
    }
    // 弹窗
    .customPop {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      box-sizing: border-box;
      z-index: 9;
      &-box {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 86%;
        height: 436rpx;
        padding-bottom: 36rpx;
        border-radius: 8rpx;
        box-shadow: 0 0 5px #363738;
        background-color: #fff;
        z-index: 99;
        box-sizing: border-box;
        &-title {
          position: relative;
          width: 100%;
          height: 70rpx;
          color: #363738;
          font-size: 34rpx;
          line-height: 70rpx;
          text-align: center;
          border-bottom: 2rpx solid #bfbfbf;
          box-sizing: border-box;
          // close
          .closePop {
            position: absolute;
            top: 0rpx;
            right: 0rpx;
            bottom: 0;
            margin: auto;
            display: flex;
            align-items: center;
            width: 60rpx;
            height: 60rpx;
            > image {
              display: block;
              width: 24rpx;
              height: 24rpx;
              margin: 0 auto;
              object-fit: cover;
            }
          }
        }
        &-Int {
          width: 100%;
          padding: 52rpx 36rpx 0rpx;
          margin-bottom: 30rpx;
          box-sizing: border-box;
          > input {
            color: #363738;
            font-size: 30rpx;
            height: 58rpx;
            line-height: 58rpx;
            padding: 10rpx 40rpx;    
            border-radius: 60rpx;
            border: 2rpx dashed #bfbfbf;
          }
          &-mtip {
            color: #bfbfbf;
            font-size: 26rpx;
            margin-top: 6rpx;
            margin-left: 40rpx;
          }
        }
        .confirm {
          position: absolute;
          bottom: 36rpx;
          left: 0;
          right: 0;
          color: #915e49;
          width: 280rpx;
          height: 79rpx;
          margin: auto;
          line-height: 79rpx;
          padding: 0 40rpx;
          font-size: 34rpx;
          text-align: center;
          border-radius: 140rpx;
          background-color: #f7c02f;
          box-shadow: 0 0 2px #f7c02f;
        }
      }
      // 蒙层
      &-mask {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 9;
      }
    }
    .back_btn{
      width: 180rpx;
      height: 80rpx;
      position: fixed;
      bottom: 40rpx;
      right: 10rpx;
      z-index: 111;
      &>image{
        width: 100%;
      }
    }
    // 提示弹窗
    .Warning {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 100%;
      height: 100%;
      z-index: 1111;
      box-sizing: border-box;
    }
    .treeWarning {
      position: absolute;
      top: 50%;
      left: 50%;
      color: #fff;
      font-size: 30rpx;
      width: 450rpx;
      padding: 20rpx;
      text-align: center;
      border-radius: 20rpx;
      transform: translate(-50%, -50%);
      background: rgba(0, 0, 0, 0.7);
    }
    // animated
    .animated {
      -webkit-animation-duration: 1s;
      -webkit-animation-fill-mode: both;
      animation-duration: 1s;
      animation-fill-mode: both;
    }
    /*fadeIn  */
    .fadeIn {
      -webkit-animation: fadeIn 0.2s linear;
      animation: fadeIn 0.2s linear;
    }
    @-webkit-keyframes fadeIn{
      0%{
        opacity: 0
      }
      to{
        opacity: 1
      }
    }
    @keyframes fadeIn{
      0%{
        opacity: 0
      }
      to{
        opacity: 1
      }
    }
    // fadeinleft
    @-webkit-keyframes fadeInLeft{
      from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
      }

      to {
        opacity: 1;
        -webkit-transform: none;
      }
    }
    @keyframes fadeInLeft {
      from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }
    .fadeInLeft {
      -webkit-animation-name: fadeInLeft;
      -webkit-animation-delay: 1s;
      -webkit-animation-timing-function: cubic-bezier(.5,.11,.52,.87);
      animation-name: fadeInLeft;
      animation-delay: 1s;
      animation-timing-function: cubic-bezier(.5,.11,.52,.87);
    }
    .addLeft {
      -webkit-animation-duration: 0.5s;
      -webkit-animation-delay: 0s;
      animation-duration: 0.5s;
      animation-delay: 0s;
    }
    // fadeinright
    @-webkit-keyframes fadeInRight {
      from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
      }

      to {
        opacity: 1;
        -webkit-transform: none;
      }
    }
    @keyframes fadeInRight {
      from {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }
    .fadeInRight {
      -webkit-animation-name: fadeInRight;
      -webkit-animation-delay: 1s;
      -webkit-animation-timing-function: cubic-bezier(.5,.11,.52,.87);
      animation-name: fadeInRight;
      animation-delay: 1s;
      animation-timing-function: cubic-bezier(.5,.11,.52,.87);
    }
    .rightNone {
      -webkit-animation-name: none;
      -webkit-animation-delay: 0s;
      animation-name: none;
      animation-delay: 0s;
    }
    // bounceInDown
    .bounceInDown {
      -webkit-animation-name: bounceInDown;
      -webkit-animation-delay: 0.5s;
      animation-name: bounceInDown;
      animation-delay: 0.5s;
    }
    @-webkit-keyframes bounceInDown {
      from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      }

      0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -560px, 0);
      }

      60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
      }

      75% {
        -webkit-transform: translate3d(0, -10px, 0);
      }

      90% {
        -webkit-transform: translate3d(0, 5px, 0);
      }

      to {
        -webkit-transform: none;
      }
    }
    @keyframes bounceInDown {
      from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      }

      0% {
        opacity: 0;
        transform: translate3d(0, -560px, 0);
      }

      60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0);
      }

      75% {
        transform: translate3d(0, -10px, 0);
      }

      90% {
        transform: translate3d(0, 5px, 0);
      }

      to {
        transform: none;
      }
    }
    /*bounceInUp  */
    .bounceInUp {
      -webkit-animation-name: bounceInUp;
      -webkit-animation-delay: 1.25s;
      animation-name: bounceInUp;
      animation-delay: 1.25s;
    }
    @-webkit-keyframes bounceInUp {
      from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      }

      from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100px, 0);
      }

      60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -10px, 0);
      }

      75% {
        -webkit-transform: translate3d(0, 5px, 0);
      }

      90% {
        -webkit-transform: translate3d(0, -2px, 0);
      }

      to {
        -webkit-transform: translate3d(0, 0, 0);
      }
    }
    @keyframes bounceInUp {
      from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      }

      from {
        opacity: 0;
        transform: translate3d(0, 100px, 0);
      }

      60% {
        opacity: 1;
        transform: translate3d(0, -10px, 0);
      }

      75% {
        transform: translate3d(0, 5px, 0);
      }

      90% {
        transform: translate3d(0, -2px, 0);
      }

      to {
        transform: translate3d(0, 0, 0);
      }
    }
  }
}